$(function () {
    $.ajax({
        url: "shipType/years",
        type: "get",
        dataType: "json",
        success: function (data) {
            data.forEach(function (val, i, arr) {
                $("#yearId").append('<a href="javascript:;"> ' + val + '年</a>')
            })
        },
        error: function (errorMsg) {
            //请求失败时执行该函数
            alert("数据加载失败!");
        }
    });
    $.ajax({
        url: "shipOverview/count",
        type: "get",
        dataType: "json",
        success: function (data) {
            data.forEach(function (val, i, arr) {
                if (val.typeName == "fault") {
                    $("#num01Id").append('<li>' + val.num + '</li>>')
                    $("#name01Id").append('<li>柴油机故障艘次</li>')
                }
                if (val.typeName == "ships") {
                    $("#num01Id").append('<li>' + val.num + '</li>>')
                    $("#name01Id").append('<li>船舶数据总条数</li>')
                }
            })
        },
        error: function (errorMsg) {
            //请求失败时执行该函数
            alert("数据加载失败!");
        }
    });

    //诊断故障船型
    shipTypeCount();
    //诊断故障原因
    shipFaultReason();
    // 诊断船龄
    shipAgeCount();
    //诊断故障原因下的不同船型
    shipFaultTypeCount();
    // 诊断故障与状态
    faultAndState();
    //  诊断出行率
    shipTraveRateCount();
});


//诊断故障船型
function shipTypeCount() {
    // 1.实例化对象并且获取dom容器
    var myChart = echarts.init(document.querySelector(".bar .chart"));
    // 2.指定配置和数据

    var option = {
        color: ["#2f89cf"],
        tooltip: {
            trigger: "axis",
            axisPointer: {
                // 坐标轴指示器，坐标轴鼠标触发有效
                type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: "0%",
            top: "10px",
            right: "0%",
            bottom: "4%",
            containLabel: true
        },
        xAxis: [
            {
                type: "category",
                data: [
                    "客船",
                    "货船",
                    "拖船",
                    "集装",
                    "邮轮",
                    "捕捞",
                    "其他"
                ],
                //data:datas.typeyear.type,
                axisTick: {
                    alignWithLabel: true
                },
                axisLabel: {//x轴刻度标签
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: 12
                    }
                },
                axisLine: {
                    show: false//x轴样式不显示
                }
            }
        ],
        yAxis: [
            {
                type: "value",
                axisLabel: {
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: 12
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)"
                        // width: 1,
                        // type: "solid"
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)"
                    }
                }
            }
        ],
        series: [
            {
                name: "艘次",
                type: "bar",
                barWidth: "35%",
                //data:datas.typeyear.number,
                // data: [200, 300, 300, 900, 1500, 1200, 600],
                itemStyle: {
                    barBorderRadius: 5
                }
            }
        ]
    };
    //alert(series.data);
    // 3.把配置给实例对象
    myChart.setOption(option);
    //4.让图表跟随浏览器大小进行适应，监听resize事件
    window.addEventListener("resize", function () {
        myChart.resize();
    });
    shipTypeAjaxReq(myChart)
    $(".bar h2 ").on("click", "a", function () {
        var parm = $(this).text().replace("年", "").trim()
        shipTypeAjaxReq(myChart, parm);
    });
}

function shipTypeAjaxReq(myChart, parm) {
    $.ajax({
        url: "shipType/count",
        data: {year: parm},
        type: "get",
        dataType: "json",
        success: function (data) {
            var xdata = [];
            var sdata = [];
            data.forEach(function (val, i, arr) {
                xdata[i] = val.cn;
                sdata[i] = val.count;
            })
            myChart.setOption({
                xAxis: {
                    data: xdata
                },
                series: [{
                    data: sdata
                }]
            })
        },
        error: function (errorMsg) {
            //请求失败时执行该函数
            alert("数据加载失败!");
        }
    });
}

//诊断故障原因
function shipFaultReason() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector(".bar1 .chart"));

    var data = [];
    var titlename = [];
    var valdata = [];
    var percent = [];

    var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];

    var option = {
        //图标位置
        grid: {
            top: "10%",
            left: "50%",
            bottom: "10%"
        },
        xAxis: {
            show: false
        },
        yAxis: [
            {
                show: true,
                data: titlename,
                inverse: true,
                axisLine: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: "#fff",

                    rich: {
                        lg: {
                            backgroundColor: "#339911",
                            color: "#fff",
                            borderRadius: 15,
                            // padding: 5,
                            align: "center",
                            width: 15,
                            height: 15
                        }
                    }
                }
            },
            {
                show: false,
                inverse: true,
                data: valdata,
                axisLabel: {
                    textStyle: {
                        fontSize: 12,
                        color: "#fff"
                    }
                }
            }
        ],
        series: [
            {
                name: "条",
                type: "bar",
                yAxisIndex: 0,
                data: data,
                barCategoryGap: 50,
                barWidth: 10,
                itemStyle: {
                    normal: {
                        barBorderRadius: 20,
                        color: function (params) {
                            var num = myColor.length;
                            return myColor[params.dataIndex % num];
                        }
                    }
                },
                label: {
                    normal: {
                        show: true,
                        position: "inside",
                        formatter: "{c}%"
                    }
                }
            },
            {
                name: "框",
                type: "bar",
                yAxisIndex: 1,
                barCategoryGap: 50,
                data: percent,
                barWidth: 15,
                itemStyle: {
                    normal: {
                        color: "none",
                        borderColor: "#00c1de",
                        borderWidth: 3,
                        barBorderRadius: 15
                    }
                }
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    $.ajax({
        url: "shipFault/count",
        type: "get",
        dataType: "json",
        async: false,
        success: function (data) {
            data.forEach(function (val, i, arr) {
                // data[i] = val.count;//(val.count / val.total * 100).toFixed(0);
                data[i] = (val.count / val.total * 100).toFixed(0);
                // titlename[i] = val.fault;
                titlename[i] = val.cn;
                valdata[i] = val.total;
                percent[i] = 100;
                // console.info(titlename[i])
            })
            myChart.setOption({
                yAxis: [
                    {
                        data: titlename
                    }, {
                        data: valdata
                    }],
                series: [
                    {
                        data: data
                    }, {
                        data: percent
                    }]
            });
        },
        error: function (errorMsg) {
            //请求失败时执行该函数
            alert("数据加载失败!");
        }
    });
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}


// 诊断出行率
function shipTraveRateCount() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector(".stackedbar .chart"));
    // 数据--> 通过ajax从后台获取
    // 2. 指定配置和数据
    var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        color: [//#dbdbd
            "red", "orange", "#fff000", "green", "#01C2F9", "blue", "purple"
        ],
        // legend: {
        //     data: ['客船', '货船', '拖船', '集装箱船', '邮轮', '捕捞', '其他']
        // },
        grid: {
            left: '0%',
            right: '0%',
            bottom: '0%',
            containLabel: true
        },
        xAxis: {
            axisTick: {
                alignWithLabel: true
            },
            axisLabel: {
                color: "#fff"//"#rgba(255,255,255,.6)"
                //fontSize:10
            },
            axisLine: {
                show: false
            },
            type: 'category',
        },
        yAxis: {
            type: 'value',
            axisTick: {
                alignWithLabel: true
            },
            axisLabel: {
                color: "#fff"//"#rgba(255,255,255,.6)"
                //fontSize:10
            },
            axisLine: {
                lineStyle: {
                    color: "rgba(255,255,255,.1)",
                    width: 2
                }
            }

        },
    };
    // 3. 把配置和数据给实例对象
    myChart.setOption(option);
    var title = [];
    var series = [];
    $.ajax({
        url: "shipTraveRate/count",
        type: "post",
        dataType: "json",
        success: function (data) {
            title = data.dates;
            var i = 0;
            for (var key in data.ships) {
                series[i++] = {
                    name: key,
                    type: 'bar',
                    barWidth: "35%",
                    stack: '总量',
                    label: {
                        // show: true,//数字过于占地方，直接改为不展示，但是可以
                        position: 'insideRight'
                    },
                    data: data.ships[key]
                }
            }

            myChart.setOption({
                legend: {
                    // data: data.shipnames
                    data: data.shipsCN
                },
                xAxis: {
                    data: title
                },
                series: series
            })

        },
        error: function (errorMsg) {
            //请求失败时执行该函数
            alert("数据加载失败!");
        }
    });
    // 重新把配置好的新数据给实例对象
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
};


// 诊断船龄
function shipAgeCount() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector(".pie .chart"));

    var title = []
    var data = [];

    option = {
        tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b}: {c} ({d}%)",
            position: function (p) {
                //其中p为当前鼠标的位置
                return [p[0] + 10, p[1] - 10];
            }
        },
        legend: {
            top: "90%",
            itemWidth: 10,
            itemHeight: 10,
            // data: ["0-5年", "6-10年", "11-15年", "16年以上"],
            data: title,
            textStyle: {
                color: "rgba(255,255,255,.5)",
                fontSize: "12"
            }
        },
        series: [
            {
                name: "船龄分布",
                type: "pie",
                center: ["50%", "42%"],
                radius: ["40%", "60%"],
                color: [
                    "#065aab",
                    "#066eab",
                    "#0682ab",
                    "#0696ab",
                    "#06a0ab",
                    "#06b4ab",
                    "#06c8ab",
                    "#06dcab",
                    "#06f0ab"
                ],
                label: {show: false},
                labelLine: {show: false},
                data: data
                // data: [
                //     //value值填入的是纯数字，占比echarts源代码会为你搞定
                //     {value: 1, name: "0-5年"},
                //     {value: 4, name: "6-10年"},
                //     {value: 2, name: "11-15年"},
                //     {value: 2, name: "16年以上"}
                // ]
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    $.ajax({
        url: "shipAge/count",
        type: "post",
        dataType: "json",
        success: function (data) {
            data.forEach(function (val, i, arr) {
                if (val.total != null) {
                    data[i] = {"value": val.total, "name": val.srange};
                    title[i] = val.srange;
                }
                /*else {
                                   data[i] = {"value": 1, "name": val.srange};
                                   title[i] = val.srange;
                               }*/
            })
            myChart.setOption({
                legend: {
                    data: title
                },
                series: [{
                    data: data
                }]
            })
        },
        error: function (errorMsg) {
            //请求失败时执行该函数
            alert("数据加载失败!");
        }
    });
    window.addEventListener("resize", function () {
        myChart.resize();
    });
};


//诊断故障原因下的不同船型
function shipFaultTypeCount() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector(".stackedbar1 .chart"));

    var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '0%',
            top: '0%',
            right: '0%',
            bottom: '0%',
            containLabel: true
        },
        xAxis: {
            //show:false
            axisLabel: {
                color: "#fff",
                fontSize: 12
            },
            splitLine: {
                lineStyle: {
                    color: "rgba(255,255,255,.1)"
                }
            },
            type: 'value'
        },
        yAxis: {
            axisLabel: {
                color: "#fff",
                fontSize: 10
            },
            axisLine: {
                lineStyle: {
                    color: "rgba(255,255,255,.1)"
                }
            },
            type: 'category',
        }
    };

    var title = [];
    var series = [];

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    $.ajax({
        url: "shipFaultType/count",
        type: "post",
        dataType: "json",
        success: function (data) {
            // title = data.faults;
            title = data.faultsCN;
            var i = 0;
            for (var key in data.ships) {
                series[i++] = {
                    name: key,
                    type: 'bar',
                    stack: '总量',
                    label: {
                        //show: true,
                        position: 'insideRight'
                    },
                    data: data.ships[key]
                }
            }

            myChart.setOption({
                yAxis: {
                    data: title
                },
                series: series
            })

        },
        error: function (errorMsg) {
            //请求失败时执行该函数
            alert("数据加载失败!");
        }
    });
    window.addEventListener("resize", function () {
        myChart.resize();
    });
};


// 诊断故障与状态
function faultAndState() {
    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector(".pie1  .chart"));
    // 2. 指定配置项和数据
    var option = {
        legend: {
            top: "78%",
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
                color: "rgba(255,255,255,.5)",
                fontSize: "12"
            }
        },
        tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        // 注意颜色写的位置
        color: [
            "#006cff",
            "#60cda0",
            "#ed8884",
            "#ff9f7f",
            "#0096ff",
            "#9fe6b8",
            "#32c5e9",
            "#1d9dff"
        ],
        series: [
            {
                name: "艘次统计",

                type: "pie",
                // 如果radius是百分比则必须加引号
                radius: ["10%", "70%"],
                center: ["50%", "42%"],
                roseType: "radius",
                // 修饰饼形图文字相关的样式 label对象
                label: {
                    fontSize: 12
                },
                // 修饰引导线样式
                labelLine: {
                    // 连接到图形的线长度
                    length: 10,
                    // 连接到文字的线长度
                    length2: 10
                }
            }
        ]
    };

    // 3. 配置项和数据给我们的实例化对象
    myChart.setOption(option);

    $.ajax({
        // url: "js/indexjsondata/test.json",
        url: "state/group",
        type: "get",
        dataType: "json",
        success: function (data1) {
            myChart.setOption({
                series: [{
                    data: data1
                }]
            })
        },
        error: function (errorMsg) {
            //请求失败时执行该函数
            alert("图表请求数据失败!");
        }
    });


    // 4. 当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener("resize", function () {
        // 让我们的图表调用 resize这个方法
        myChart.resize();
    });
};
